<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <body>

        <div id="container">
            <header>
                <h1>蜗牛学院学生管理系统</h1>
            </header>
            <main>
                <aside>
                    <dl>
                        <dt class="active">学生管理</dt>
                        <dd><a href="./studentsAdd.html">新增学生</a></dd>
                        <dd><a href="./studentsList.html">学生列表</a></dd>
                    </dl>
                    <dl>
                        <dt>班级管理</dt>
                        <dd><a href="./classesAdd.html">新增班级</a></dd>
                        <dd><a href="./classesList.html">班级列表</a></dd>
                    </dl>
                    <dl>
                        <dt>班主任管理</dt>
                        <dd><a href="./directorsAdd.html">新增班主任</a></dd>
                        <dd><a href="./directorsAdd.html">班主任列表</a></dd>
                    </dl>
                    <dl>
                        <dt>教师管理</dt>
                        <dd><a href="./teachersAdd.html">新增教师</a></dd>
                        <dd><a href="./teachersList.html">教师列表</a></dd>
                    </dl>
                    <dl>
                        <dt>专业管理</dt>
                        <dd><a href="./professionAdd.html">新增专业</a></dd>
                        <dd><a href="./professionList.html">专业列表</a></dd>
                    </dl>
                    <dl>
                        <dt>排课管理</dt>
                        <dd><a href="#">新增排课</a></dd>
                        <dd><a href="#">排课列表</a></dd>
                    </dl>
                </aside>
                <section>
                    <div class="section-content" id="studentsList">
                        <h2>学生信息</h2>
                        <div class="content">
                            <div class="content-info">
                                <h3>学生数据</h3>
                                <div>
                                    <div class="content-row">
                                        <div class="search-frame">
                                            <select style="width: 60px;" id="searchType">
                                            <option value="name">姓名</option>
                                            <option value="age">年龄</option>
                                            <option value="gender">性别</option>
                                        </select>
                                            <input type="text" id="searchValue">
                                        </div>
                                    </div>

                                    <table>
                                        <thead>
                                            <tr>
                                                <th>学生编号</th>
                                                <th>学生姓名</th>
                                                <th>学生年龄</th>
                                                <th>学生性别</th>
                                                <th>学生班级</th>
                                                <th>学生专业</th>
                                                <th>学生头像</th>

                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="studentsTb">

                                        </tbody>
                                    </table>
                                    <div class="content-row" style="display: flex;justify-content: space-between;">
                                        <p>每页
                                            <select id="pageSize">
                                            <option value="3">3</option>
                                            <option value="5">5</option>
                                            <option value="7">7</option>
                                            <option value="10">10</option>
                                        </select> 条数据。显示第 1 条到第 <span id="branches">3</span>条数据，共计 <span id="sum"></span>条数据。
                                        </p>
                                        <span>第 <strong id="currentPage">1</strong>/<strong id="pages">1</strong> 页</span>
                                    </div>
                                    <div class="content-row" style="text-align: center;">
                                        <button id="homePage">首页</button>
                                        <button id="prevPage">上一页</button>
                                        <button id="nextPage">下一页</button>
                                        <button id="lastPage">尾页</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>


    </body>

</html>